<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SteTimeout</title>
    <meta name="author" content="Administrator" />
    <!-- Date: 2014-07-01 -->
    <style type="text/css">
        *{margin:0;padding:0;}
        .img{width:1002px;height:500px;border:0;}
        .container{margin:0 auto;padding:0;width:1002px;height:500px;}
        .content01{margin:100px auto;width:1002px;height:500px;background:pink;}
        .content02{width:1002px;height:30px;position:absolute;top:570px;background:#A7C942;}
        .ul{margin:0;padding:0;}
        .ul li{width:167px;height:30px;float:left;list-style:none;text-align:center;line-height:30px;}
    </style>
    <script type="text/javascript">
        var a=0;//全局变量
        var arr=new Array(6);//创建数组对象，且设置长度
        var run=true;//根据run的值来控制是否启动显示效果
        for(var i=0;i<arr.length;i++){//遍历数组
            arr[i]="images/"+i+".jpg";
        }
        window.onload=start;//页面加载完成后，执行开始方法
        function stop(){//结束滚动
            run=false;
            clearInterval(t);//结束，清楚由t引发的setInterval方法
        }
        function start(){//开始滚动
            run=true;
            t=setInterval(changeBox,1000);//使用setInterval方法，每一秒钟执行一次changeBox.
        }
        function liBox(){//下面滑块的动态显示，
            for(var i=0;i<arr.length;i++){
                if(i!=a){//如果不等于，那么背景为空；反之，则有背景
                    document.getElementById("li"+i).style.background="";
                }else{document.getElementById("li"+a).style.background="#EAF2D3";}
            }
        }
        function changeBox(){
            if(run){//如果run==true,那么运行下面代码
                var b=document.getElementById("images");
                if(a>arr.length-1){
                    a=0;
                    b.src=arr[a];
                    liBox();
                    a++;
                }else{
                    b.src=arr[a];
                    liBox();
                    a++;
                }
            }
        }
        function now(n){//当鼠标在滑块上时调用的党法
            a=n;
            liBox();
            document.getElementById("images").src=arr[a];
        }
    </script>
</head>
<body>
<div class="container" onMouseMove="stop()" onMouseOut="start()">
    <div class="content01"><img class="img" id="images" src="images/0.jpg" /></div>
    <div class="content02">
        <ul class="ul">
            <li id="li0" onmousemove="now(0)" style="background:#EAF2D3;">A</li>
            <li id="li1" onmousemove="now(1)">B</li>
            <li id="li2" onmousemove="now(2)">C</li>
            <li id="li3" onmousemove="now(3)">D</li>
            <li id="li4" onmousemove="now(4)">E</li>
            <li id="li5" onmousemove="now(5)">F</li>
        </ul>
    </div>
</div>
</body>
</html>